<!-- 页面 -->
<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <div class="dahe">
            <div class="xhe"></div>
            <div class="xhe"></div>
            <div class="xhe"></div>
        </div>
        <van-sidebar>
            <van-sidebar-item title="资深讲师" />
        </van-sidebar>
        <div v-for="(item, index) in 3" :key="index">
            <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
        </div>
        <van-sidebar>
            <van-sidebar-item title="推荐课程" />
        </van-sidebar>
        <div v-for="(item, index) in 3" :key="index">
            <van-card num="2" price="2.00" desc="描述信息" title="疯狂英语" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
        </div>
    </div>
</template>
<!-- vue -->

<script>
export default {
    data () {
        return {
            // 声明的属性
        }
    },
    //生命周期函数
    mounted () {
    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: pink;
}

.xhe {
    border: 1px solid #000;
    border-radius: 20px;
    width: 4rem;
    height: 4rem;
    background-color:plum;
}

.dahe {
    display: flex;
    justify-content: space-around;
    position: relative;
    top: -25px;
}


</style>